<!--  -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生图书管理</el-breadcrumb-item>
      <el-breadcrumb-item>图书借阅</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!--        查询框-->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入图书名称"
                    clearable
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="openEnter">新建借书</el-button>
        </el-col>
      </el-row>
      <el-table
          :data="books"
          ref="bookRef"
          border
          height="490"
          stripe
      >
        <template slot="empty" v-if="books!=null&&books.length===0">
          <i class="el-icon-loading"></i>
          <span>玩命加载中...</span>
        </template>
        <el-table-column type="expand" align="center">
          <template slot-scope="props">
            <el-form label-position="left" inline>
              <el-form-item>
                <span>{{ props.row.abs }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="书名(展开查看摘要)" fit align="center"></el-table-column>
        <el-table-column prop="num" label="数量" fit align="center"></el-table-column>
        <el-table-column prop="category.name" label="分类" width="100" align="center"></el-table-column>
        <el-table-column prop="author" label="作者" fit align="center"></el-table-column>
        <el-table-column prop="date" label="出版日期" width="120" align="center"></el-table-column>
        <el-table-column prop="press" label="出版社" fit align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="220" align="center">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="存储位置" placement="top" :enterable="false">
              <el-button type="success" icon="el-icon-s-flag" size="mini"
                         @click="location(scope.row)">
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--        出库登记-->
    <el-dialog
        title="借书登记"
        :visible.sync="enterDialog"
        width="45%"
        @close="enterClose">
      <el-form
          :model="student"
          ref="enterRef"
          :rules="enterRules"
          label-width="90px"
          :inline="true">
        <p style="color: red">*请先放置学生卡</p>
        <el-form-item label="学生卡编号">
          <el-autocomplete
              v-model="student.email"
              :fetch-suggestions="querySearchAsync"
              placeholder="请先防置学生卡"
              @select="handleSelect">
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="student.username" :disabled="true" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="student.name" :disabled="true" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="student.roleName" :disabled="true" style="width: 220px"></el-input>
        </el-form-item>
        <el-divider></el-divider>
      </el-form>
      <el-form
          :model="returnbook"
          ref="shipRef"
          label-width="90px"
          :inline="true"
          v-if="student.username!=''"
      >
        <p style="color: red">*请先选择学生卡后，放置图书</p>

        <el-form-item label="图书编号">
          <el-autocomplete
              v-model="returnbook.rfid"
              :fetch-suggestions="querySearchAsync1"
              placeholder="请扫描图书标签"
              @select="handleSelect1">
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="isbn">
          <el-input v-model="returnbook.isbn" :disabled="true" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="书名">
          <el-input v-model="returnbook.title" :disabled="true" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="returnbook.author" :disabled="true" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="出版社">
          <el-input v-model="returnbook.press" :disabled="true" style="width: 220px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="enterDialog = false ,shipDialog = false">取 消</el-button>
                <el-button type="primary" @click="shipYes1">确 定</el-button>
            </span>
    </el-dialog>

    <!--        存放位置-->
    <el-dialog
        title="存放地址（仓库）"
        :visible.sync="locationDialog"
        width="30%"
    >
      <p style="color: red">*存放位置为在待检库中的存放位置W代表仓库编号，
        R代表库区编号，S代表货架编号，L代表层编号</p>
      <p>存放位置：{{ locations }}</p>
      <span slot="footer" class="dialog-footer">
                <el-button @click="locationDialog = false" type="info">关 闭</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import {Message} from "element-ui";

export default {
  data() {
    return {
      dialogVisible: false, //初始时不显示
      enterDialog: false,
      books: [], //初始化的图书数据
      book: {}, //修改之后的单个图书数据
      multiSelect: [],
      studentquery: {
        name: '',
        state: 1,
        isread: 1
      },
      returnbook: {
        rfid: '',
        title: '',
        author: '',
        press: '',
        isbn: ''
      },
      queryInfo1: {
        name: '',
        state: 1,
        isread: 1
      },
      student: {
        email: '',
        name: '',
        username: '',
        roleName: ''
      },
      query: {
        id: '',
      },
      locationDialog: false,
      locations: [],
      enter: {
        tNote: '',
        tid: '',
        orderNum: '',
        name: '',
        type: '',
        count: '',
        countQ: 0,
        countD: 0,
        pid: [],
        area1: '',
        area2: 0,
        lid: '',
        operator: this.$store.state.user.name
      },
      ship: {
        id: '',
        area1: '',
        expCode: '',
        expNo: '',
        rfid: ''
      },
      enterRules: {
        universal: [{required: true, message: '必填项', trigger: 'blur'}],
      },
      initBook: {
        isbn: "",
        title: "",
        num: "",
        author: "",
        date: "",
        press: "",
        cover: "",
        abs: "",
        cid: "",
        isborrow: "",
        category: {
          id: "",
          name: ""
        },
        tag: 1
      }

    };
  },
  components: {},
  computed: {
    tableHeight() {
      return window.innerHeight - 320;
    },
    newBook() {
      return this.book;
    }
  },
  methods: {
    //获取所有的图书资料
    async getBooksData() {
      console.log('查询所有图书');
      const res = await this.$http.get('/api/getAllBooks');
      if (res && res.status === 200) {
        console.log(res.obj);
        console.log('查询所有图书完毕');
        this.books = res.obj;
      }
      /*let _this = this;
      _this.$api.bookApi.getAllBooks().then(res => {
        if (res && res.data.code === 200) {
          console.log(res);
          this.books = res.data.data;
        }
      });*/
    },

    async location(item) {
      console.log(item);
      this.locationDialog = true;
      const res = await this.$http.get('/bookPosition/' + item.position);
      console.log(res);
      if (res) {
        this.locations = res.obj;
      }

    },
    async shipYes1() {
      if (this.returnbook.rfid == '' || this.student.email == '') {
        Message.error("请查看是否确认学生卡或图书卡");
        return;
      }
      for (let book of this.books) {
        if (book.isbn == this.returnbook.isbn && book.num == 0) {
          Message.error("该图书太火爆，被借完了！");
          return;
        }
      }
      const res = await this.$http.post('/api/addBkBrwRecord', {
        username: this.student.username,
        isbn: this.returnbook.isbn,
        rfid: this.returnbook.rfid,
        borrowdate: 0,
        returndate: 0,
        isreturn: 1
      });
      if (res && res.status === 200) {
        console.log('更新图书状态!')
        const res1 = await this.$http.post('/api/updateIsBrw', {
          isbn: this.returnbook.isbn,
          rfid: this.returnbook.rfid,
          isborrow: 1
        })

        this.getBooksData();
        this.enterClose();
        if (res1 && res1.status === 200) {
          //借阅成功，重新加载所有图书信息
          this.reloadTg = true;
          this.$message({
            type: "success",
            message: "借阅成功！"
          });
          this.getBooksData();
          this.enterClose();
        } else {
          this.$message({
            type: "error",
            message: "借阅失败！"
          });
        }
      }
      this.getBooksData();
      this.enterClose();
    },
    enterClose() {
      this.student = {
        email: '',
        name: '',
        username: '',
        roleName: '',
      };
      this.returnbook = {
        rfid: '',
        title: '',
        author: '',
        press: '',
        isbn: ''
      };
      //this.query.id = '';
      this.warehouseId = '';
      this.enterDialog = false;
    },
    openEnter() {
      this.enterDialog = true;
      // this.shipDialog = true;
    },
    //远程查询学生卡
    async querySearchAsync(queryString, cb) {
      this.studentquery.name = queryString;
      console.log('查询学生信息');
      const res = await this.$http.get('/employee/RFIDUser/', {params: this.studentquery});
      console.log(res);
      for (let i of res.obj) {
        i.value = i.username + ':' + i.name;
        // i.value = i.data;
      }
      cb(res.obj);
    },
    handleSelect(item) {
      this.student.email = item.email;
      this.student.roleName = item.roleName;
      this.student.name = item.name;
      this.student.username = item.username;
    },

    //远程查询Book
    async querySearchAsync1(queryString, cb) {
      this.queryInfo1.name = queryString;
      const res = await this.$http.get('/RFIDBook/', {params: this.queryInfo1});
      console.log(res);
      for (let i of res.obj) {
        i.value = i.title + ':' + i.author + i.press;
        // i.value = i.data;
      }
      cb(res.obj);
    },
    handleSelect1(item) {
      this.returnbook.rfid = item.rfid;
      this.returnbook.isbn = item.isbn;
      this.returnbook.title = item.title;
      this.returnbook.author = item.author;
      this.returnbook.press = item.press;
    },
    //显示对话框 不能直接在DOM上操作dialogVisible
    showEditForm() {
      this.dialogVisible = true;
      this.book = this.initBook;
    },
    //改变对话框显示与否
    changeDialogVisible(val) {
      this.dialogVisible = val;
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    console.log("查询所有数据");
    this.getBooksData(); //初始化获取数据
    //这个地方如果初始化时，不赋值为空对象，会报错id undefined
    this.book = this.initBook;
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  }
}
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.book-table-main {
  width: 90%;
}

.book-table-add {
  margin: 18px 0 4px 10px;
}

.book-table-footer {
  margin-top: 20px;
}
</style>